<template> 
  <el-main>
    <el-main class="img">
      
      <el-descriptions class="margin-top" :column="2" size="large" title="我的个人信息" style="color: #fff; text-align: center;">
        <template vl-slot="extra" style="text-align: center;">
          <el-descriptions-item width="50"><el-icon :size="iconsize"><UserFilled /></el-icon></el-descriptions-item>
          <el-descriptions-item label="用户名" style="text-decoration-color: #fff;">kooriookami</el-descriptions-item>
          <el-descriptions-item><el-icon :size="iconsize"><Key /></el-icon></el-descriptions-item>
          <el-descriptions-item label="密码"></el-descriptions-item>
          <el-descriptions-item><el-icon :size="iconsize"><PhoneFilled /></el-icon></el-descriptions-item>
          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
          <el-descriptions-item><el-icon :size="iconsize"><LocationFilled /></el-icon></el-descriptions-item>
          <el-descriptions-item label="年龄">18</el-descriptions-item>  
          <el-descriptions-item><el-icon :size="iconsize"><School /></el-icon> </el-descriptions-item>
          <el-tag size="small" style="background-color: #FFD700; color: #333;">广西桂林</el-tag>
          <el-descriptions-item></el-descriptions-item>
          <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item> 
        </template>
      </el-descriptions>
      <el-button type="primary" size="medium" style="background-color: #D2691E;"><el-icon><Edit /></el-icon>修改</el-button>  &nbsp;&nbsp; 
      <el-button type="primary" size="medium" style="background-color: #D2691E;"><el-icon><Edit /></el-icon>操作</el-button>   
    </el-main> 
  </el-main>
</template>

<script> 
export default {
  name: 'personal',
  data() {
    return {
      iconsize: 25
    };
  }
}
</script>

<style>
.margin-top {
  width: 61.8%;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(99, 96, 96, 0.618);
  height: 60vh;
  margin-bottom: 20px;
  padding: 6.18%;
  padding-left: 9%;
}
.center-div {
  width: 50%;
  margin: 0 auto;
}

el-main {
  height: 85vh;
}

.img {
  background-image: url("@/assets/geren.jpg");
  height: 85vh; 
  text-align: center; 
}

.el-descriptions__body {
  background-color: var(--el-fill-color-blank) transparent;
  text-align: center;
}
.el-descriptions__title {
  color: #e99a6c;
}
.el-descriptions__label:not(.is-bordered-label){
  color: #fbfbfb;
}
.el-descriptions__content:not(.is-bordered-label){
  color: #fbfbfb;
}
.el-descriptions .el-descriptions--large .margin-top {
  margin: 0 auto;
}
</style>
